.#{$prefix}grid {
  display: flex;
  flex-wrap: wrap;
  margin-right: -1 * $gutter;
  margin-left: -1 * $gutter;
  margin-top: -1 * $gutter;
}

.#{$prefix}grid > #{$prefix}.col,
.#{$prefix}grid > [class*="#{$prefix}col"] {
  box-sizing: border-box;
}

.#{$prefix}grid-nogutter {
  margin-right: 0;
  margin-left: 0;
  margin-top: 0;
}

.#{$prefix}grid-nogutter > .#{$prefix}col,
.#{$prefix}grid-nogutter > [class*="#{$prefix}col-"] {
  padding: 0;
}

.#{$prefix}col {
  flex-grow: 1;
  flex-basis: 0;
  padding: $gutter;
}

.#{$prefix}col-fixed {
  flex: 0 0 auto;
  padding: $gutter;
}

$grid-columns: (
        "col-1": 8.3333%,
        "col-2": 16.6667%,
        "col-3": 25%,
        "col-4": 33.3333%,
        "col-5": 41.6667%,
        "col-6": 50%,
        "col-7": 58.3333%,
        "col-8": 66.6667%,
        "col-9": 75%,
        "col-10": 83.3333%,
        "col-11": 91.6667%,
        "col-12": 100%
) !default;

$grid-column-offsets: (
        "col-offset-0": 0,
        "col-offset-1": 8.3333%,
        "col-offset-2": 16.6667%,
        "col-offset-3": 25%,
        "col-offset-4": 33.3333%,
        "col-offset-5": 41.6667%,
        "col-offset-6": 50%,
        "col-offset-7": 58.3333%,
        "col-offset-8": 66.6667%,
        "col-offset-9": 75%,
        "col-offset-10": 83.3333%,
        "col-offset-11": 91.6667%,
        "col-offset-12": 100%,
) !default;

@each $col, $width in $grid-columns {
  .#{$prefix}#{$col} {
    flex: 0 0 auto;
    padding: $gutter;
    width: #{$width};
  }
}

@each $key, $val in $breakpoints {
  @media screen and (min-width: #{$val}) {
    .#{$key + $separator} {
      &#{$prefix}col {
        flex-grow: 1;
        flex-basis: 0;
        padding: $gutter;
      }

      &#{$prefix}col-fixed {
        flex: 0 0 auto;
        padding: $gutter;
      }

      @each $col, $width in $grid-columns {
        &#{$prefix}#{$col} {
          flex: 0 0 auto;
          padding: $gutter;
          width: #{$width};
        }
      }
    }
  }
}

@include style-class('margin-left', $grid-column-offsets, true);